<template>
	<view class="scroll-tabbar">
		<view class="scroll-bar">
			<!-- #ifdef MP-WEIXIN -->
			<scroll-view class="scroll-view" scroll-x scroll-with-animation enable-flex :scroll-left="scrollLeft" :show-scrollbar="false">
				<template v-for="(item, index) in tabs" :key="index">
					<view class="scroll-view-item" :class="{ active: currentTabIndex == index }" @click="clickScrollItem(item, index)">
						{{ item.name }}
					</view>
				</template>
			</scroll-view>
			<!-- #endif -->

			<!-- #ifdef MP-TOUTIAO -->
			<view class="scroll-view">
				<template v-for="(item, index) in tabs" :key="index">
					<view class="scroll-view-item" :class="{ active: currentTabIndex == index }" @click="clickScrollItem(item, index)">
						{{ item.name }}
					</view>
				</template>
			</view>
			<!-- #endif -->
		</view>

		<view class="scroll-search" @click="handleSearch">
			<image class="scroll-search-img" src="@/static/images/icons/search_red.png" mode="heightFix"></image>
		</view>
	</view>
</template>

<script setup>
	import { ref, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
	const _this = getCurrentInstance();

	// - props/emit
	const props = defineProps({
		tabs: Array,
		currentTabIndex: {
			type: Number,
			default: () => 0
		}
	});
	const emit = defineEmits(['tabClick']);

	// - data
	const scrollContentWidth = ref(0);
	const scrollLeft = ref(0);

	// - metheds
	// 用于计算tab移动到中心位置
	const getScrollWidth = () => {
		nextTick(() => {
			const query = uni.createSelectorQuery().in(_this);

			// 拿到 scroll-view 的宽度
			query
				.select('.scroll-view')
				.boundingClientRect((data) => {
					scrollContentWidth.value = data.width;
				})
				.exec();

			// 拿到 scroll-view-item 的宽度
			query
				.selectAll('.scroll-view-item')
				.boundingClientRect((data) => {
					for (let i = 0; i < data.length; i++) {
						props.tabs[i].left = data[i].left;
						props.tabs[i].width = data[i].width;
					}
				})
				.exec();
		});
	};
	// 居中计算：它距左边距离 - 盒子总宽度的一半 + 它自身宽度的一半
	const calc = () => {
		scrollLeft.value = props.tabs[props.currentTabIndex].left - scrollContentWidth.value / 2 + props.tabs[props.currentTabIndex].width / 2;
	};
	// 点击tab
	const clickScrollItem = (item, index) => {
		emit('tabClick', { currentTab: { ...item }, currentTabIndex: index });
	};
	// 点击搜索
	const handleSearch = () => {
		uni.navigateTo({
			url: '/pages_details/search/search'
		});
	};

	watch(
		() => props.currentTabIndex,
		() => {
			calc();
		}
	);

	// - lifecycle
	onMounted(() => {
		getScrollWidth();
	});
</script>

<style lang="scss">
	.scroll-tabbar {
		display: flex;
		position: relative;
		width: 100%;

		.scroll-bar {
			width: calc(100% - 60rpx);
			height: 55rpx;
			box-sizing: border-box;
			overflow-x: auto;
		}

		.scroll-view {
			display: flex;
			width: 100%;
			height: 100%;

			.scroll-view-item {
				margin-right: 40rpx;
				white-space: nowrap;
				height: 100%;
				font-weight: 400;
				color: #333333;
				transition: all 0.2s ease;
			}
			.scroll-view-item:first-of-type {
				margin-left: 30rpx;
			}
			.scroll-view-item:last-of-type {
				margin-right: 0;
			}
			.scroll-view-item.active {
				position: relative;
				font-weight: 600;
				color: #000000 !important;
				transition: all 0.2s ease;

				&::before {
					content: '';
					position: absolute;
					display: block;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 50rpx;
					height: 4rpx;
					background: #000000;
					z-index: 99;
				}
			}
		}

		.scroll-search {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			width: 60rpx;
			text-align: center;

			.scroll-search-img {
				height: 35rpx;
			}
		}
	}
</style>
